<template>
  <div class="home-container">
    <!-- navbar导航栏 -->
    <van-nav-bar class="navbar">
      <van-button
        round
        slot="title"
        type="info"
        class="searchBtn"
        size="small"
        text="搜索"
        icon="search"
      ></van-button>
    </van-nav-bar>

    <!-- tab标签页 -->
    <van-tabs>
      <van-tab v-for="(item,index) in channel" :title="item.name" :key="index">
        <!-- 页面的内容 -->
        <article-list :channel="item"></article-list>
      </van-tab>

      <!-- 汉堡按钮 -->
      <!-- nav-right右侧插入 -->
      <!-- 右侧占位符 -->
      <div slot="nav-right" class="placeholder"></div>
      <!-- 右侧汉堡菜单按钮 -->
      <van-tabs slot="nav-right" class="hamburger-btn">
        <i class="toutiao toutiao-gengduo"></i>
      </van-tabs>
    </van-tabs>
  </div>
</template>

<script>
import { getChannelList } from '@/api/user.js'
import ArticleList from './components/article-list.vue'
export default {
  name: 'home',
  data() {
    return {
      channel: [],
      active: 0
    }
  },
  created() {
    // this.loadArticles()
    this.onloadChannelList()
  },
  methods: {
    async onloadChannelList() {
      try {
        const { data } = await getChannelList()
        const result = data.data
        this.channel = result.channels
        // console.log(this.channel)
        // console.log(data)
      } catch (error) {
        console.log('获取用户列表数据失败')
      }
    }
  },

  components: {
    ArticleList
  }
}
</script>

<style lang="less" scoped>
// 导航栏部分
/deep/ .navbar {
  .searchBtn {
    margin: 0 auto;
    width: 520px;
    // height: 32px !important;
    background-color: #5babfb;
    color: #fff;
    z-index: 10;
    font-size: 25px;
    .van-icon {
      color: #fff;
      font-size: 32px;
    }
  }
  .van-nav-bar__title {
    max-width: 80%;
  }
}
// tab标签页区域
/deep/.van-tabs__nav {
  .van-tab {
    height: 100%;
  }
  .van-tab__text--ellipsis {
    box-sizing: border-box;
    padding-top: 10px !important;
  }
  .van-tabs__line {
    width: 28px !important;
    background-color: #3296fa;
    top: 69px;
  }
  //  flex-shrink这个是设置不是平分的flex
  .placeholder {
    flex-shrink: 0;
    width: 66px;
    height: 82px;
  }

  .hamburger-btn {
    position: fixed;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 66px;
    height: 82px;
    background-color: #fff;
    opacity: 0.902;
    i.toutiao {
      font-size: 33px;
    }
    &:before {
      content: '';
      position: absolute;
      left: 0;
      width: 1px;
      height: 100%;
      background-image: url(~@/assets/gradient-gray-line.png);
      background-size: contain;
    }
  }
}
</style>
